<template>
  <Modal
    class="modal-tips"
    v-model="config"
    @on-cancel="cancel"
    :mask-closable="false"
    footer-hide
    width="780"
    :draggable="!fullscreen"
    :fullscreen="fullscreen"
    :sticky="true"
  >
    <div slot="header" class="modal-header">
      <span>{{ title }}</span
      ><Icon
        class="fullscreen"
        v-if="!fullscreen"
        @click="fullscreen = true"
        size="20"
        type="ios-expand"
      /><Icon
        v-else
        class="fullscreen"
        @click="fullscreen = false"
        size="20"
        type="ios-contract"
      />
    </div>
    <div
      class="rule-content-area"
      :class="{ 'rule-content-area-height': !fullscreen }"
      v-html="content"
    ></div>
  </Modal>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    content: {
      default: "",
    },
    title: {
      default: "",
    },
  },
  data() {
    return {
      fullscreen: false,
    };
  },
  methods: {
    cancel() {
      this.config = false;
    },
  },
  computed: {
    config: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.modal-header {
  width: 100%;
  position: relative;

  span {
    font-size: 16px;
    line-height: 25px;
  }
  .fullscreen {
    position: absolute;
    right: 30px;
    cursor: pointer;
    color: #888;
    transition: color 0.3s;
    &:hover {
      color: #111;
    }
  }
}
.rule-content-area-height {
  max-height: 400px;
}
</style>
